<!-- 
    循环注册点击事件
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>牌鱼罐头</li>
        <li>大猪笛子</li>
    </ul>

    <script>
        //1.我们可以动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // console.log(i);
            lis[i].index = i;  //动态添加属性的方式
            lis[i].onclick = function () {
                // console.log(i);
                //手动点击时，循环已经执行完了i的值已经不变了，所以点击哪个都是最后的值
                //可以这样理解，这里循环绑定一个点击事件，当程序执行时，for循环已经跑完了，没有在
                //for循环内部接收，而是在点击里面接收，只有点击才会触发，循环已经走完，你点击
                //必定是最后的一个数字4
                console.log(this.index);
            }
        }

        //2.利用闭包的方式来获取li的索引号(面试题)

        for (var i = 0; i < lis.length; i++) {
            //利用for循环创建了4个立即执行函数
            //立即执行函数也称之为小闭包因为立即执行函数里面呢任何一个函数都可以使用它i这变量
            (function (i) {
                // console.log(i);
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i);   //这里的i是个形参，每个i的地址都是不同的，之前的i是实参，四个函数是同一个i
        }


    </script>
</body>

</html>